<template>
  <div id="container"></div>
</template>

<script setup>
import { Graph, Minimap, Grid, ImageMinimap } from "@antv/g6";
import axios from "axios";
import { onMounted } from "vue";
onMounted(async () => {
  const minimap = new Minimap({
    size: [100, 100],
    className: "minimap",
    type: "delegate",
  });
  const imageMinimap = new ImageMinimap({
    width: 100,
    height: 100,
    graphImg: ''
  })
  const grid = new Grid();
  let graph = new Graph({
    container,
    animate: true,
    width: 800,
    height: 600,
    defaultNode: {
      labelCfg: {
        style: {
          fill: "#fff",
        },
      },
      //   style: {
      //     fill: 'steelblue',
      //     stroke: 'red',
      //     lineWidth: 5
      //   }
    },
    defaultEdge: {
      labelCfg: {
        autoRotate: true,
      },
    },
    nodeStateStyles: {
      hover: {
        fill: "lightsteelblue",
      },
      click: {
        stroke: "#000",
        lineWidth: 3,
      },
    },
    edgeStateStyles: {
      click: {
        stroke: "steelblue",
      },
    },
    layout: {
      type: "force",
      linkDistance: 100,
      preventOverlap: true,
      nodeStrength: -30,
      edgeStrength: 0.1,
    },
    modes: {
      default: [
        "drag-node",
        "drag-canvas",
        "zoom-canvas",
        {
          // 点击提示框交互工具的配置
          type: "tooltip",
          // offset: 10,
          formatText(model) {
            const text = "label" + model.label + "<br/> class:" + model.class;
            return text;
          },
          shouldUpdate() {
            return true;
          },
        },
        {
          type: "edge-tooltip",
          // offset: 10,
          formatText(model) {
            const text =
              "source:" +
              model.source +
              "<br/> target:" +
              model.target +
              "<br/> weight:" +
              model.weight;
            return text;
          },
          shouldUpdate() {
            return true;
          },
        },
      ],
    },
    plugins: [minimap, grid],
    // plugins: [imageMinimap, grid],
    fitCenter: true,
  });
  const { data } = await axios.get(
    "/g6Api/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json"
  );
  const nodes = data.nodes;
  const edges = data.edges;
  nodes.forEach((node) => {
    if (!node.style) {
      node.style = {};
    }
    node.style.lineWidth = 1;
    node.style.stroke = "#666";
    node.style.fill = "steelblue";
    switch (node.class) {
      case "c0": {
        node.type = "circle";
        node.size = 30;
        break;
      }
      case "c1": {
        node.type = "rect";
        node.size = [35, 20];
        break;
      }
      case "c2": {
        node.type = "ellipse";
        node.size = [35, 20];
        break;
      }
    }
  });
  edges.forEach((edge) => {
    if (!edge.style) {
      edge.style = {};
    }
    edge.style.lineWidth = edge.weight + 3;
    edge.style.opacity = 0.6;
    edge.style.stroke = "grey";
  });
  graph.read(data);
//   graph.on("afterupdateitem", () => {
//     // 在图形渲染完成后，执行导出操作
//     // graph.downloadFullImage("tree-graph", "image/png", {
//     //   backgroundColor: "#ddd",
//     //   padding: [30, 15, 15, 15],
//     // });
//     const dataURL = graph.toDataURL();
//     console.log(dataURL)
//     imageMinimap.updateGraphImg(dataURL)
//     // 其他操作，例如显示图片等
//   });
//   graph.on("afterrender", () => {
//     // 在图形渲染完成后，执行导出操作
//     // graph.downloadFullImage("tree-graph", "image/png", {
//     //   backgroundColor: "#ddd",
//     //   padding: [30, 15, 15, 15],
//     // });
//     const dataURL = graph.toDataURL();
//     // console.log(dataURL)
//     imageMinimap.updateGraphImg(dataURL)
//     // 其他操作，例如显示图片等
//   });

  graph.on("node:mouseenter", (e) => {
    const nodeItem = e.item;
    console.log(nodeItem.get('group'))
    graph.setItemState(nodeItem, "hover", true);
  });
  graph.on("node:mouseleave", (e) => {
    const nodeItem = e.item;
    graph.setItemState(nodeItem, "hover", false);
  });
  graph.on("node:click", (e) => {
    const clickNodes = graph.findAllByState("node", "click");
    clickNodes.forEach((cn) => {
      graph.setItemState(cn, "click", false);
    });
    const nodeItem = e.item;
    graph.setItemState(nodeItem, "click", true);
  });
  graph.on("edge:click", (e) => {
    const clickEdges = graph.findAllByState("edge", "click");
    clickEdges.forEach((eg) => {
      graph.setItemState(eg, "click", false);
    });
    const edgeItem = e.item;
    graph.setItemState(edgeItem, "click", true);
  });
});
</script>

<style lang="less">
#container {
  position: relative;
}
.g6-tooltip {
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  font-size: 12px;
  color: #545454;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px 8px;
  box-shadow: rgb(174, 174, 174) 0 0 10px;
}
</style>
